<template>
  <a-table
    class="p-table"
    :columns="columns"
    :data-source="dataSource"
    :locale="locale"
    :rowKey="rowKey"
    :pagination="upagination"
    @change="tableChange"
    :loading="loading"
    :customRow="customRow"
    :bordered="true"
    :rowClassName="rowClassName"
  >
    <span slot="index" slot-scope="text, record, index">
      {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
    </span>
    <span slot="QYMC" slot-scope="text" class="p-table-ent">
      <a-popover>
        <template slot="content">
          {{ text }}
        </template>
        {{ text }}
      </a-popover>
    </span>
  </a-table>
</template>

<script>
import pEmpty from '@/components/ent_licSearch/p-empty.vue'
export default {
  props: {
    // 表头
    columns: {
      type: Array,
      require: true
    },
    // 数据源
    dataSource: {
      type: Array,
      require: true
    },
    // 表格分页参数
    upagination: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表格行key
    rowKey: {
      type: String,
      require: true
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      locale: {
        emptyText: <p-empty></p-empty>
      }
    }
  },
  components: {
    pEmpty
  },
  mounted() {},
  methods: {
    // 表格change事件
    tableChange(pagination, filters, sorter) {
      this.$emit('change', pagination, filters, sorter)
    },
    // 行点击事件
    customRow(record) {
      return {
        style: {
          cursor: 'pointer'
        },
        on: {
          click: () => {
            this.$emit('rowClick', record)
          }
        }
      }
    },
    rowClassName(record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    }
  }
}
</script>

<style lang="less" scoped>
// .p-table {
// /deep/.ant-table {
//   border: 1px solid #e3e8ee;
//   border-bottom: none;
// }

// /deep/.ant-table {
//   font-size: 16px;
// }
// }

// /deep/.ant-table-thead > tr > th {
//   font-size: 16px !important;
//   color: #666666 !important;
//   background: #f1f6ff !important;
// }

// .p-table-ent {
//   color: #0b51c1;
// }
</style>
